<template>
    <div class="category-index">
        <!-- 头部添加 -->
        <header>
            <el-button color="#da9233">添加</el-button>
        </header>
        <main v-loading="loading">
            <el-card style="height: 100%">
                <el-table
                    :header-cell-style="{ 'text-align': 'center' }"
                    :cell-style="{ 'text-align': 'center' }"
                    :data="tableData"
                    stripe
                    style="width: 100%"
                >
                    <el-table-column prop="id" label="Id" width="380" />
                    <el-table-column prop="name" label="分类名" width="380" />
                    <el-table-column fixed="right" label="操作" width="420">
                        <template #default>
                            <el-button link type="primary" size="small"
                                >修改</el-button
                            >
                            <el-button link type="primary" size="small"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table></el-card
            >
        </main>
        <!-- 底部 -->
        <footer>
            <el-pagination layout="prev, pager, next" :total="total" />
        </footer>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { findCategory } from '../../apis/category'

const tableData = ref([])
let total = ref(0)
let loading = ref(true)
onMounted(() => {
    findCategory().then(res => {
        tableData.value = res
        total.value = res.length
        loading.value = false
    })
})
</script>

<style lang="scss" scoped>
.category-index {
    header {
        height: 35px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    main {
        height: 500px;
    }
    footer {
        margin-top: 5px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
